<template>
  <div class="cBox">
    <div class="leftBox">
      <ul>
        <a-checkbox-group @change="onChange">
          <li
            v-for="(item, index) in itemObj"
            :key="index"
            class="checkItem"
            :class="[active == index ? 'activeClass' : '']"
          >
            <a-checkbox :value="item.key" :key="index"> </a-checkbox>
            <span class="itemBox" @click="itemClik(index)"><img src="./img/model.png" />{{ item.value }}</span>
          </li>
        </a-checkbox-group>
      </ul>
    </div>

    <div class="rightBox">
      <a-form-model ref="ruleForm1" :model="form1" :rules="rules1" v-show="showArr[0]">
        <span style="position: absolute;left: 20px;top:10px;">时间段在</span>
        <a-form-model-item prop="startPeriod" style="margin-left: 65px;">
          <a-input class="input" v-model="form1.startPeriod" /> 点至
        </a-form-model-item>
        <a-form-model-item prop="endPeriod">
          <a-input class="input" v-model="form1.endPeriod" />点，且近
        </a-form-model-item>
        <a-form-model-item prop="day">
          <a-input class="input" v-model.number="form1.day" style="margin-left: 8px;" /> 天内与种子号码通联超过
        </a-form-model-item>
        <a-form-model-item prop="time">
          <a-input class="input" v-model.number="form1.time" style="margin-left: 8px;" /> 次的人员
        </a-form-model-item>
        <a-form-model-item prop="networkStartPeriod">
          时间段在
          <a-input class="input" v-model="form1.networkStartPeriod" style="margin-left: 0;" /> 点至
        </a-form-model-item>
        <a-form-model-item prop="networkEndPeriod">
          <a-input class="input" v-model="form1.networkEndPeriod" />点与种子号码通联，且手机网络制式为
        </a-form-model-item>
        <a-form-model-item prop="network">
          <a-select v-model="form1.network" placeholder="请选择" style="margin-left: 8px;width:100px;">
            <a-select-option value="A"> A </a-select-option>
            <a-select-option value="B"> B </a-select-option>
            <a-select-option value="C"> C </a-select-option>
            <a-select-option value="D"> D </a-select-option>
          </a-select>
          的人员
        </a-form-model-item>
      </a-form-model>
      <a-form-model ref="ruleForm2" :model="form2" :rules="rules2" v-show="showArr[1]">
        <a-form-model-item>
          时间范围在距今
          <a-input class="input" v-model.number="form2.day" style="margin-left: 0;" /> 天内，种子号码在任意
          <a-input class="input" v-model.number="form2.min" />分钟内，通联
          <a-input class="input" v-model="form2.num" style="margin-left: 0;" /> 个以上的号码
        </a-form-model-item>
        <a-form-model-item>
          时间范围在距今
          <a-input class="input" v-model="form2.msgDay" style="margin-left: 0;" /> 天内，收到种子号码的群发短信
        </a-form-model-item>
      </a-form-model>
      <a-form-model ref="ruleForm3" :model="form3" :rules="rules3" v-show="showArr[2]">
        <a-form-model-item>
          时间段在
          <a-input class="input" v-model="form3.startPeriod" style="margin-left: 0;" /> 点至
          <a-input class="input" v-model="form3.endPeriod" />点，且近
          <a-input class="input" v-model.number="form3.day" style="margin-left: 0;" /> 天内与种子号码通联大于
          <a-input class="input" v-model.number="form3.num" style="margin-left: 0;" /> 次的人员
        </a-form-model-item>
      </a-form-model>
      <a-form-model ref="ruleForm4" :model="form4" :rules="rules4" v-show="showArr[3]">
        <a-form-model-item>
          在
          <a-input class="input" v-model.number="form4.day" style="margin-left: 0;" /> 天内，每天转账次数大于
          <a-input class="input" v-model.number="form4.num" />次的人员
        </a-form-model-item>
        <a-form-model-item>
          在
          <a-input class="input" v-model.number="form4.transferDay" style="margin-left: 0;" /> 天内，转账金额在
          <a-select v-model="form4.transferLevel" placeholder="请选择" style="margin-left: 0;width:100px;">
            <a-select-option value="A"> A </a-select-option>
            <a-select-option value="B"> B </a-select-option>
            <a-select-option value="C"> C </a-select-option>
            <a-select-option value="D"> D </a-select-option>
          </a-select>
          等级以上的行为超过
          <a-input class="input" v-model.number="form4.transferNum" />次的人员
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
// import { asj } from '@/api'
export default {
  props: ['modalShow', 'list'],
  data() {
    return {
      itemObj: [
        { key: 0, value: '作案手机模型' },
        { key: 1, value: '涉走私水客群体挖掘模型' },
        { key: 2, value: '异常通联行为发现' },
        { key: 3, value: '异常资金往来挖掘' }
      ],
      active: 0,
      rules1: {
        startPeriod: [{ required: true, message: '请输入' }],
        endPeriod: [{ required: true, message: '请输入' }],
        day: [{ required: true, message: '请输入' }],
        time: [{ required: true, message: '请输入' }],
        networkStartPeriod: [{ required: true, message: '请输入' }],
        networkEndPeriod: [{ required: true, message: '请输入' }],
        network: [{ required: true, message: '请选择' }]
      },
      rules2: {
        incidentName: [{ required: true, message: '请输入案事件名称' }],
        departName: [{ required: true, message: '请选择所属单位' }],
        rangeTime: [{ required: true, message: '请选择案事件日期' }],
        apprehendUser: [{ required: true, message: '请输入办案人' }],
        apprehendUserPhone: [{ required: true, message: '请输入联系电话' }],
        description: [{ required: true, message: '请输入说明' }]
      },
      rules3: {
        incidentName: [{ required: true, message: '请输入案事件名称' }],
        departName: [{ required: true, message: '请选择所属单位' }],
        rangeTime: [{ required: true, message: '请选择案事件日期' }],
        apprehendUser: [{ required: true, message: '请输入办案人' }],
        apprehendUserPhone: [{ required: true, message: '请输入联系电话' }],
        description: [{ required: true, message: '请输入说明' }]
      },
      rules4: {
        incidentName: [{ required: true, message: '请输入案事件名称' }],
        departName: [{ required: true, message: '请选择所属单位' }],
        rangeTime: [{ required: true, message: '请选择案事件日期' }],
        apprehendUser: [{ required: true, message: '请输入办案人' }],
        apprehendUserPhone: [{ required: true, message: '请输入联系电话' }],
        description: [{ required: true, message: '请输入说明' }]
      },
      form1: {},
      form2: {},
      form3: {},
      form4: {},
      showArr: [],
      checkedArr: [],
      modelIdList: []
    }
  },
  created() {
    this.itemObj.forEach(() => {
      this.showArr.push(false)
    })
    this.showArr[0] = true
  },
  mounted() {
    // this.getModalList()
  },

  methods: {
    itemClik(index) {
      console.log(index)
      this.active = index
      this.showArr = []
      this.itemObj.forEach(() => {
        this.showArr.push(false)
      })
      this.showArr[index] = true
      // console.log(this.showArr)
    },
    close() {
      this.$emit('on-close')
    },
    selectModel(index, flag) {
      let modelList = this.modelList
      this.modelList = []
      modelList[index].selected = !flag
      this.modelList = modelList
    },
    onChange(checkedValues) {
      // console.log('checked = ', checkedValues)
      this.checkedArr = checkedValues
      this.onValidate()
    },
    getModelIdList() {
      return this.modelIdList
    },
    onValidate() {
      // let isValid = false
      // let isValid1 = false
      // let isValid2 = false
      this.checkedArr.forEach(item => {
        if (item == 0) {
          this.$refs.ruleForm1.validate(valid => {
            console.log(valid)
            if (!valid) {
              this.$message.warning('作案手机模型不能为空！')
            }
          })
        }
        if (item == 1) {
        }
        if (item == 2) {
        }
        if (item == 3) {
        }
      })
    },
    getData() {
      if (this.checkedArr.length <= 0) {
        this.$message.warning('至少勾选一项模型')
        return
      }
      let obj = {}
      this.modelIdList = []
      this.checkedArr.forEach(item => {
        if (item == 0) {
          obj.phoneModelDTO = this.form1
          this.modelIdList[0] = '11'
        }
        if (item == 1) {
          obj.wadeModelDTO = this.form2
          this.modelIdList[1] = '12'
        }
        if (item == 2) {
          obj.exceptionRelationModelDTO = this.form3
          this.modelIdList[2] = '13'
        }
        if (item == 3) {
          obj.exceptionTradeModelDTO = this.form4
          this.modelIdList[3] = '14'
        }
      })
      // console.log(this.modelIdList)
      return obj
    }
  }
}
</script>
<style lang="less" scoped>
.cBox {
  padding-bottom: 50px;
  overflow: hidden;
  display: flex;
  .leftBox {
    // float: left;
    display: flex;
    align-items: center;
    border-right: 1px solid #ccc;
    padding-right: 20px;
    ul {
      float: left;
      list-style: none;
      margin: 0px;
      padding: 0;
      .checkItem {
        cursor: pointer;
        margin: 5px 5px;
        padding: 5px 5px;
        .itemBox {
          display: inline-block;
          width: 197px;
          > img {
            margin: 0 6px;
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
  .rightBox {
    // float: left;
    // margin-left: 20px;
    position: relative;
    width: 73%;
    /deep/.ant-form {
      overflow: hidden;
      margin-left: 20px;
      .ant-row {
        float: left;
      }
    }
  }
}
.activeClass {
  background-color: #eef7ff;
}
.input {
  width: 70px;
  margin: 0 6px;
}
/deep/.ant-col-15 {
  width: 65%;
}
</style>
